<template>
    <ul class="userlist">
        <li v-for="item in userData" @click="goUserProfile(item.username, item.usr_id,item.is_un_see)" :key="item.usr_id">
            <div class="matchRed" v-if="item.is_un_see"></div>
            <div class="avatar" :class="getGenderBgClass(item.gender)">
                <lazyImg :src="filterGenderImg(item.icon)"></lazyImg>
                <div v-if="parseInt(item.numberofpictures) > 1" class="photoNum"><span></span>{{ item.numberofpictures }}</div>
                <div v-if="parseInt(item.numberofpictures) > 1" class="bbg"></div>
            </div>
            <div class="info">
                <div class="name">
                    <!-- <span v-if="!item.isGuest" class="ico_gold"></span> -->
                    <span class="username">{{ item.username }}</span>
                    <span class="date">{{ item.event_date }}</span>
                </div>
                <div v-if="!item.hide_profile" class="text location">
                    {{ item.baseInfo }}
                </div>
                <div class="text" v-if="item.hide_profile">{{language.unify_hideProfile}}</div>
                <div class="text" v-else>{{ item.headline }}</div>
            </div>
        </li>
        <loading :props="{show:ajaxBool}"></loading>
    </ul>
</template>
<script>
import globalMixin from '../common/globalMixin'
import lazyImg from './LazyImg'
import loading from './Loading'
export default {
    name: 'UserList',
    props: ['userData', 'ajaxBool'],
    mixins: [globalMixin],
    components: {
        lazyImg,
        loading
    },
    created() {
        //console.log(this.userData);
    },
    updated() {
        //console.log(this.userData);
    },
    data: function() {
        return {
            loading: false,
        }
    },
    methods: {
        goUserProfile(username, profId, unSee) {
            if (this.$parent.moveUnSee && typeof(unSee) != 'undefined' && parseInt(unSee) == 1) {
                this.$parent.moveUnSee(profId);
            }
            let myUsrId = this.$store.state.user.userInfo.account.usr_id;
            if (parseInt(myUsrId) != parseInt(profId)) {
                this.$router.push({
                    name: 'userProfile',
                    query: {
                        userName: username,
                        userId: profId
                    }
                });
            } else {
                this.$router.push({
                    name: 'me',
                });
            }
        },
    }
}

</script>
<style scoped>
.userlist li {
    width: 100%;
    min-height: 100px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px dotted #d9d9d9;
}

.userlist li:last-child {
    border-bottom: 0;
}

.userlist .matchRed {
    width: 10px;
    height: 10px;
    background: #DF4141;
    display: block;
    border-radius: 10px;
    top: 11px;
    left: 83px;
    position: absolute;
}

.userlist .avatar {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    overflow: hidden;
    left: 15px;
    top: 15px;
    background-size: 70px 70px;
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

.userlist .avatar .bbg {
    content: '';
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    overflow: hidden;
    left: 0;
    top: 0;
    background: url(../assets/userlist_bbg.png) bottom center no-repeat;
}

.userlist .avatar .photoNum {
    height: 15px;
    line-height: 17px;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 5px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #fff;
}

.userlist .avatar .photoNum span {
    background: url(../assets/ico_photo.png) 0 1px no-repeat;
    background-size: 13px auto;
    padding: 0 0 0 15px;
}

.userlist .info {
    margin: 0 15px 0 105px;
    overflow: hidden;
}

.userlist .name {
    margin: 13px 0 0 0;
    padding: 0 40px 0 0;
    position: relative;
    overflow: hidden;
    height: 28px;
    line-height: 28px;
    font-size: 15px;
}

.userlist .ico_gold {
    background: url(../assets/ico_gold.png) center no-repeat;
    background-size: auto 17px;
    padding: 2px 0 2px 17px;
    margin-right: 5px;
}

.userlist .date {
    display: block;
    position: absolute;
    line-height: 28px;
    color: #a3a4a6;
    font-size: 12px;
    right: 0;
    top: 0;
}

.userlist .text {
    font-size: 13px;
    line-height: 25px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    color: #a3a4a6;
}

</style>
